// 验证当前用户是否登录(有无token)
checkLogin()
// 页面数据的渲染
renderUaerName()
getData()
// 退出登录
document.querySelector('#logout').addEventListener('click', function () {
  // 删除token
  localStorage.removeItem('token')
  // 跳转登录页面
  location.href = './login.html'
})


// 1.更新页面的用户名
function renderUaerName() {
  const username = localStorage.getItem('username')
  document.querySelector('.username').innerHTML = username
}
// 2.获取看板的所有数据
async function getData() {
  const token = localStorage.getItem('token')
  // 避免页面提示两次, 如果没有token等待校验函数退出即可
  if (!token) return
  // 获取数据
  const res = await axios({ url: '/dashboard' })
  // 看板数据
  // res.data.data.overview
  // console.log(res.data.data.overview);
  // 渲染overview数据
  renderOverview(res.data.overview)
  console.log(res);

  let lineChart = renderLine(res.data.year)
  let pieChart = renderPie(res.data.salaryData)
  let barChart = renderBar(res.data.groupData)
  let doublePieChart = renderDoublePie(res.data.salaryData)
  let mapChart = renderMap(res.data.provinceData)

  // 注册一次事件(使用闭包解决图标resize问题)
  window.addEventListener('resize', function () {
    // 需要各个图表
    lineChart()
    pieChart()
    barChart()
    doublePieChart()
    mapChart()
  })
}
// 3.更新预览卡片
function renderOverview(data) {
  // data就是要渲染的数据
  for (let k in data) {
    // k => age salary .....
    if (k === 'age') {
      document.querySelector(`.${k}`).innerHTML = data[k].toFixed(2)
    } else {
      document.querySelector(`.${k}`).innerHTML = data[k]
    }
  }
}
// 4.渲染线型图
function renderLine(data) {
  const myChart = echarts.init(document.querySelector('#line'))
  const option = {
    title: {
      text: '2022全学科薪资走势',
      left: '2%',  // 标题距离左侧的距离，可以是百分比或具体像素值
      top: '5%'     // 标题距离顶部的距离，可以是百分比或具体像素值
    },
    grid: {
      top: '18%',
      bottom: '10%',
      left: '10%',
      right: '8%'
    },
    tooltip: {},
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: data.map(item => item.month)
    },
    yAxis: {
      type: 'value',
      min: 0,
      max: 25000,
      interval: 5000,
      axisLabel: {
        formatter: '{value}'
      }
    },
    series: [
      {
        name: '薪资',
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 10, // 增大符号大小
        lineStyle: {
          width: 4 // 设置线宽为4px
        },
        itemStyle: {
          color: '#44Aaff', // 点的颜色
          borderColor: '#fff', // 边缘颜色设置为空心需要的颜色
          borderWidth: 2 // 边缘宽度
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(
            0, 0, 0, 1,
            [{
              offset: 0,
              color: 'rgba(68, 170, 255, 0.3)' // 0% 处的颜色
            }, {
              offset: 1,
              color: 'rgba(68, 170, 255, 0)' // 100% 处的颜色
            }]
          )
        },
        data: data.map(item => item.salary)
      }
    ]
  };
  myChart.setOption(option)
  return function () {
    myChart.resize()
  }
}
// 渲染饼状图
function renderPie(data) {
  // 初始化echarts实例
  const chartDom = document.querySelector('#salary')
  const myChart = echarts.init(chartDom);
  // 指定数据
  const option = {
    title: {
      text: '班级薪资分布',
      left: 20,
      top: 10
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      bottom: '5%',
      left: 'center'
    },
    series: [
      {
        name: '薪资分布',
        type: 'pie',
        radius: ['52%', '70%'],// 修改圆环宽度
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 20, // 增大圆角
          borderColor: '#fff',
          borderWidth: 5 // 修改圆环之间的宽度
        },
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: false,
            fontSize: 40,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: data.map(item => {
          return {
            value: item.g_count + item.b_count,
            name: item.label
          }
        }, [])
      }
    ]
  };
  // 使用刚指定的配置项和数据显示图表。
  option && myChart.setOption(option);
  return function () {
    myChart.resize()
  }

}
// 渲染柱形图
function renderBar(data) {
  const myChart = echarts.init(document.querySelector('#lines'))
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      orient: 'horizontal',
      bottom: '5%',
      data: ['2021', '2022']
    },
    grid: {
      top: '10%',
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    yAxis: {
      type: 'value',
      min: 0,
      max: 25000,
      interval: 5000,
      axisLabel: {
        formatter: '{value}'
      },
      axisLine: {
        lineStyle: {
          color: '#ccc'
        }
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed',
          color: '#ccc'
        }
      }
    },
    xAxis: {
      type: 'category',
      data: data[1].map(item => item.name),
      axisTick: {
        show: false
      },
      axisLine: {
        show: false
      },
      axisLabel: {
        rotate: 0, // 正常排列
        interval: 0
      },
      splitLine: {
        show: false
      }
    },
    series: [
      {
        name: '期望薪资',
        type: 'bar',
        barWidth: '30%',
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0, 0, 0, 1,
              [{
                offset: 0,
                color: '#3fd69f' // 起始颜色
              }, {
                offset: 1,
                color: '#3fd69f11' // 结束颜色
              }]
            ),
          }
        },
        data: data[1].map(item => item.hope_salary)
      },
      {
        name: '就业薪资',
        type: 'bar',
        barWidth: '30%',
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0, 0, 0, 1,
              [{
                offset: 0,
                color: '#4da1ed' // 起始颜色
              }, {
                offset: 1,
                color: '#4da1ed11' // 结束颜色
              }]
            ),
          }
        },
        data: data[1].map(item => item.salary)
      }
    ]
  };
  myChart.setOption(option)
  return function () {
    myChart.resize()
  }
  // 点击数字切换下一页
  document.querySelector('#btns').addEventListener('click', function (e) {
    if (e.target.tagName === 'BUTTON') {
      // 排他思想, 实现点击的高亮
      document.querySelector('.btn-blue').classList.remove('btn-blue')
      e.target.classList.add('btn-blue')

      // 数据更新
      option.xAxis.data = data[e.target.innerHTML].map(item => item.name)
      option.series[0].data = data[e.target.innerHTML].map(item => item.hope_salary)
      option.series[1].data = data[e.target.innerHTML].map(item => item.salary)
      myChart.setOption(option)
    }
  })
}
// 渲染双饼图
function renderDoublePie(data) {
  // 初始化 ECharts 实例
  const myChart = echarts.init(document.querySelector('#gender'));

  // 数据
  const datas = [
    data.map(item => {
      return {
        value: item.g_count,
        name: item.label
      }
    }, {}),
    data.map(item => {
      return {
        value: item.b_count,
        name: item.label
      }
    }, {})
  ];
  // 颜色数组
  const colors = ['#fda224', '#5097ff', '#3abcfa', '#34d39a'];
  // 选项配置
  const option = {
    title: [{
      text: '男女薪资分布',
      textStyle: {
        fontWeight: '600',
        fontSize: 14
      },
      left: '4%', // 标题居中
      top: '4%'       // 调整标题距离顶部的距离

    },
    {
      text: '男生',
      textStyle: {
        fontWeight: '600',
        fontSize: 14
      },
      left: 'center', // 标题居中
      top: '50%'       // 调整标题距离顶部的距离

    },
    {
      text: '女生',
      textStyle: {
        fontWeight: '600',
        fontSize: 14
      },
      left: 'center', // 标题居中
      top: '89%'       // 调整标题距离顶部的距离

    }],
    series: datas.map(function (data, idx) {
      // 计算每个饼图的 top 值，使其向下移动
      const topOffset = idx * 40; // 每个饼图之间间隔 40% 的高度
      return {
        type: 'pie',
        radius: ['40%', '60%'], // 缩小环形图的大小
        center: ['50%', '50%'],
        top: (20 + topOffset) + '%', // 从 20% 开始，逐步增加
        height: '30%', // 减小每个饼图的高度
        itemStyle: {
          borderColor: '#fff',
          borderWidth: 1,
        },
        label: {
          show: true,
          position: 'outside',
          rich: {
            b: {
              fontSize: 12,
              color: '#000'
            },
            c: {
              fontSize: 10,
              color: '#999'
            }
          }
        },
        labelLine: {
          length: 15,
          length2: 0,
          maxSurfaceAngle: 80
        },
        data: data.map((item, index) => ({
          ...item,
          itemStyle: {
            color: colors[index % colors.length]
          }
        })),
      };
    })
  };

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
  return function () {
    myChart.resize()
  }
}
// 渲染地图
function renderMap(data) {
  const myChart = echarts.init(document.querySelector('#map'))
  const max = Math.max(...data.map(item => item.value))
  const option = {
    visualMap: {
      min: 0,
      max,
      left: 'left',
      top: 'bottom',
      text: ['高', '低'],
      calculable: false,
      orient: 'horizontal',
      inRange: {
        color: ['#e0ffff', '#006edd'],
        symbolSize: [30, 100]
      }
    },
    tooltip: {
      padding: 8,
      enterable: true,
      transitionDuration: 1,
      textStyle: {
        color: '#fff',
        decoration: 'none',
      }
    },
    series: [{
      name: '学生就业数量',
      type: 'map',
      mapType: 'china',
      itemStyle: {
        normal: {
          label: {
            show: false
          }
        },
        emphasis: {
          label: {
            show: true
          }
        }
      },
      label: {
        normal: { //静态的时候展示样式
          show: true, //是否显示地图省份得名称
          textStyle: {
            color: "#fff",
            fontSize: 12
          }
        },
        emphasis: { //动态展示的样式
          color: '#fff',
        },
      },
      data: [{
        name: '北京',
        value: 0,
      },
      {
        name: '天津',
        value: 0,
      },
      {
        name: '上海',
        value: 0,
      },
      {
        name: '重庆',
        value: 0,
      },
      {
        name: '河北',
        value: 0,
      },
      {
        name: '河南',
        value: 0,
      },
      {
        name: '云南',
        value: 0,
      },
      {
        name: '辽宁',
        value: 0,
      },
      {
        name: '黑龙江',
        value: 0,
      },
      {
        name: '湖南',
        value: 0,
      },
      {
        name: '安徽',
        value: 0,
      },
      {
        name: '山东',
        value: 0,
      },
      {
        name: '新疆',
        value: 0,
      },
      {
        name: '江苏',
        value: 0,
      },
      {
        name: '浙江',
        value: 0,
      },
      {
        name: '江西',
        value: 0,
      },
      {
        name: '湖北',
        value: 0,
      },
      {
        name: '广西',
        value: 0,
      },
      {
        name: '甘肃',
        value: 0,
      },
      {
        name: '山西',
        value: 0,
      },
      {
        name: '内蒙古',
        value: 0,
      },
      {
        name: '陕西',
        value: 0,
      },
      {
        name: '吉林',
        value: 0,
      },
      {
        name: '福建',
        value: 0,
      },
      {
        name: '贵州',
        value: 0,
      },
      {
        name: '广东',
        value: 0,
      },
      {
        name: '青海',
        value: 0,
      },
      {
        name: '西藏',
        value: 0,
      },
      {
        name: '四川',
        value: 0,
      },
      {
        name: '宁夏',
        value: 0,
      },
      {
        name: '海南',
        value: 0,
      },
      {
        name: '台湾',
        value: 0,
      },
      {
        name: '香港',
        value: 0,
      },
      {
        name: '澳门',
        value: 0,
      },
      ]
    },]
  }
  // 根据数据的接口, 修改option中series的data
  const newData = option.series[0].data.map(item => {
    // item是初始化地图数据的每一项
    // item在接口数据中查找
    const city = data.find(city => {
      return city.name.includes(item.name)
    })
    return {
      name: item.name,
      value: city ? city.value : 0
    }
  })
  console.log(newData);
  option.series[0].data = newData
  myChart.setOption(option)
  return function () {
    myChart.resize()
  }
}